<script setup lang="ts">
import { ref } from 'vue';

// 定义 props
const props = defineProps({
    open: {
        type: Boolean,
        required: true,
        default: false
    }
});

const onCancel = () => {
    onClear();
};
const onClear = () => {};

const pay_list = ref([
    { id: 1, url: '/images/pay/01.png' },
    { id: 2, url: '/images/pay/02.png' },
    { id: 3, url: '/images/pay/03.png' },
    { id: 4, url: '/images/pay/04.png' },
    { id: 5, url: '/images/pay/05.png' },
    { id: 6, url: '/images/pay/06.png' }
]);

const active_id = ref(1);

const open2 = ref(false)
const open3 = ref(false)
</script>

<template>
    <!-- 支付列表 -->
    <a-modal
        :open="open"
        :closable="false"
        :width="518"
        :bodyStyle="{ padding: '26px 0 0' }"
        :footer="null"
        destroyOnClose
        class="menu-modal !top-[192px]"
        @cancel="onCancel"
    >
        <div class="text-white">
            <p class="mb-5 text-center text-2xl">支払い内容の確認</p>
            <div class="mb-14 flex items-center gap-5 px-5">
                <img src="/images/delicacy/01.jpg" alt="" class="h-28 w-28 rounded-2xl" />
                <div class="flex-1">
                    <p class="flex gap-1 text-3xl text-[#EA3740]"><span class="text-base">¥</span>354,080</p>
                    <p>銀座 麒麟（Qi Lin(ギンザキリン））</p>
                </div>
            </div>
            <p class="px-5 text-base text-[#C5C5C5]">支払い方法を選択</p>
            <div class="my-5 grid h-[300px] grid-cols-3 content-start gap-x-16 gap-y-8 overflow-x-hidden overflow-y-auto px-5">
                <div
                    v-for="{ id, url } in pay_list"
                    :key="id"
                    class="flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border-4 bg-white"
                    :class="id === active_id ? 'border-[#f00]' : 'border-[#353535]'"
                    @click="active_id = id"
                >
                    <img :src="url" alt="Logo" class="block max-h-[20px] max-w-[80%]" />
                </div>
                <div
                    v-for="{ id, url } in pay_list"
                    :key="id"
                    class="flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border-4 bg-white"
                    :class="id === active_id ? 'border-[#f00]' : 'border-[#353535]'"
                    @click="active_id = id"
                >
                    <img :src="url" alt="Logo" class="block max-h-[20px] max-w-[80%]" />
                </div>
                <div
                    v-for="{ id, url } in pay_list"
                    :key="id"
                    class="flex h-10 w-full cursor-pointer items-center justify-center rounded-lg border-4 bg-white"
                    :class="id === active_id ? 'border-[#f00]' : 'border-[#353535]'"
                    @click="active_id = id"
                >
                    <img :src="url" alt="Logo" class="block max-h-[20px] max-w-[80%]" />
                </div>
            </div>
            <div class="px-5">
                <a-button class="btn-bg-gradient !h-12 !text-lg" type="primary" block>支払う</a-button>
            </div>
        </div>
    </a-modal>

    <!-- 支付二维码 -->
    <a-modal
        :open="open2"
        :closable="false"
        :width="414"
        :bodyStyle="{ padding: '26px 0 0' }"
        :footer="null"
        destroyOnClose
        class="menu-modal !top-[192px]"
        @cancel="onCancel"
    >
        <div class="flex flex-col items-center gap-8 text-white">
            <p class="text-2xl">お店に支払う</p>
            <p class="my-5 text-base">銀座 麒麟（Qi Lin(ギンザキリン））</p>
            <img src="/images/pay/qr-code.png" alt="" width="200" height="200" />
            <p class="mb-10 flex items-center gap-1 text-3xl font-bold"><span class="text-base leading-0 font-normal ">¥</span>354,080</p>
            <p class="text-base">こちらのバーコードを読み込んでください</p>
        </div>
    </a-modal>

    <!-- 支付成功 -->
    <a-modal
        :open="open3"
        :closable="false"
        :width="414"
        :bodyStyle="{ padding: '26px 20px 0' }"
        :footer="null"
        destroyOnClose
        class="menu-modal !top-[192px]"
        @cancel="onCancel"
    >
        <div class="text-white">
            <p class="text-center text-2xl">支払い完了</p>
            <div class="my-[30px] flex flex-col items-center gap-[18px] rounded-lg bg-[#8686861A] pt-[30px] pb-6">
                <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M23.1695 0C10.3766 0 0 10.3766 0 23.1635C0 35.9564 10.3766 46.339 23.1695 46.339C35.9623 46.339 46.339 35.9683 46.339 23.1695C46.339 10.3766 35.9683 4.57143e-08 23.1695 0ZM36.2016 17.5177L21.2138 32.5055C20.7054 33.0138 20.0415 33.265 19.3717 33.259C18.7018 33.265 18.038 33.0138 17.5296 32.5055L10.2211 25.191C9.21038 24.1802 9.21038 22.5415 10.2211 21.5367C11.2319 20.526 12.8706 20.526 13.8754 21.5367L19.3717 27.0331L32.5473 13.8574C33.5581 12.8467 35.1968 12.8467 36.2016 13.8574C37.2123 14.8682 37.2123 16.5069 36.2016 17.5177Z"
                        fill="#00B277"
                    />
                </svg>
                <p class="text-lg">ありがとうごさいます。<br />お支払いが完了しました。</p>
            </div>
            <p>支払い情報</p>
            <div class="mt-3 mb-16 rounded-lg bg-[#8686861A] px-4 py-5">
                <div class="flex items-center gap-4">
                    <span class="mr-auto">合計金額</span>
                    <p class="flex items-center gap-1 text-xl leading-0 font-medium"><span class="text-sm font-normal">¥</span>354,080</p>
                </div>
                <div class="mt-4 flex items-center gap-4 border-t border-[#84848466] pt-4">
                    <span class="mr-auto">支払い方法</span>
                    <div class="rounded-xs border border-[#505050] px-2 py-1">
                        <img src="/images/pay/01.png" alt="" height="14" />
                    </div>
                    <p class="shrink-0">PayPay</p>
                </div>
            </div>
            <div class="flex items-center gap-1">
                <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M8.25 4.5C8.44891 4.5 8.63968 4.57902 8.78033 4.71967C8.92098 4.86032 9 5.05109 9 5.25V8.25C9 8.44891 8.92098 8.63968 8.78033 8.78033C8.63968 8.92098 8.44891 9 8.25 9C8.05109 9 7.86032 8.92098 7.71967 8.78033C7.57902 8.63968 7.5 8.44891 7.5 8.25V5.25C7.5 5.05109 7.57902 4.86032 7.71967 4.71967C7.86032 4.57902 8.05109 4.5 8.25 4.5ZM7.71975 9.96975C7.78938 9.90012 7.87205 9.84488 7.96303 9.80719C8.05401 9.76951 8.15152 9.75011 8.25 9.75011C8.34848 9.75011 8.44599 9.76951 8.53697 9.80719C8.62795 9.84488 8.71062 9.90012 8.78025 9.96975C8.84988 10.0394 8.90512 10.122 8.94281 10.213C8.98049 10.304 8.99989 10.4015 8.99989 10.5C8.99989 10.5985 8.98049 10.696 8.94281 10.787C8.90512 10.8779 8.84988 10.9606 8.78025 11.0302C8.71062 11.0999 8.62795 11.1551 8.53697 11.1928C8.44599 11.2305 8.34848 11.2499 8.25 11.2499C8.15152 11.2499 8.05401 11.2305 7.96303 11.1928C7.87205 11.1551 7.78938 11.0999 7.71975 11.0302C7.65012 10.9606 7.59488 10.8779 7.5572 10.787C7.51951 10.696 7.50011 10.5985 7.50011 10.5C7.50011 10.4015 7.51951 10.304 7.5572 10.213C7.59488 10.122 7.65012 10.0394 7.71975 9.96975ZM8.25 1.5C4.52175 1.5 1.5 4.52175 1.5 8.25C1.5 11.9783 4.52175 15 8.25 15C11.9783 15 15 11.9783 15 8.25C15 4.52175 11.9783 1.5 8.25 1.5ZM8.25 0C12.8063 0 16.5 3.69375 16.5 8.25C16.5 12.8063 12.8063 16.5 8.25 16.5C3.69375 16.5 0 12.8063 0 8.25C0 3.69375 3.69375 0 8.25 0Z"
                        fill="#E88B2D"
                    />
                </svg>
                <p>領収書が必要なお客様はフロントで発行してください</p>
            </div>
        </div>
    </a-modal>
</template>
